<template>
    <div class="content">
        <el-dialog :visible.sync="leadershipTeacher.dialogFormVisible" title="设置班主任" size="tiny" :before-close="handleClose">
            <div v-loading = "upLoading">
              <section>
                <el-form :model="formList" ref="formList" label-width="90px" @submit.native.prevent>
                  <el-form-item label="设置班主任">
                    <el-autocomplete v-model="formList.sUserName" :fetch-suggestions="querySearchAsync" placeholder="请输入内容" @select="handleSelect" style="width:100%"></el-autocomplete>
                    <!-- <el-select v-model="formList.sUserName" placeholder="请设置班主任" style="width:100%">
                      <el-option v-for="item in formList.options" :key="item.fUserId" :label="item.sUserName" :value="item.sUserName">
                      </el-option>
                    </el-select> -->
                  </el-form-item>
                </el-form>
              </section>
              <footer>
                <el-button @click="cancel">取消</el-button>
                <el-button @click="add" type="primary">确认</el-button>
              </footer>
            </div>
        </el-dialog>
    </div>
</template>
<script>
import { setOwner, getTeacherLists } from "api/classAll";
export default {
  name: "headmasterData",
  props: {
    leadershipTeacher: {
      type: Object,
      required: true
    }
  },
  created() {},
  data() {
    return {
      upLoading: false,
      formList: {
        options: [],
        sUserName: "",
        fUserId: ""
      }
    };
  },
  methods: {
    querySearchAsync(queryString, cb) {
      if (this.leadershipTeacher.id && queryString) {
        getTeacherLists(this.leadershipTeacher.id, queryString).then(data => {
          this.formList.options = data.data.content;
          var results = queryString
            ? this.formList.options.filter(this.createStateFilter(queryString))
            : this.formList.options;

          clearTimeout(this.timeout);
          this.timeout = setTimeout(() => {
            cb(results);
          }, 200 * Math.random());
        });
      } else {
        this.formList.fUserId = "";
        cb([]);
      }
    },
    createStateFilter(queryString) {
      return state => {
        state.value = state.sUserName;
        // return (state.value.indexOf(queryString.toLowerCase()) === 0);
        return state.value.toLowerCase().includes(queryString.toLowerCase());
      };
    },
    handleSelect(item) {
      this.formList.fUserId = item.fUserId;
    },
    handleClose() {
      this.leadershipTeacher.dialogFormVisible = false;
    },
    add() {
      if (
        this.formList.sUserName &&
        this.leadershipTeacher.classId &&
        this.formList.fUserId
      ) {
        this.upLoading = true;
        let sUserName = this.formList.sUserName.replace(
          /\(\w+\)*/g,
          function() {
            return "";
          }
        );
          setOwner(
          this.leadershipTeacher.classId,
          this.formList.fUserId,
          sUserName
        ).then(data => {
          this.upLoading = false;
            this.leadershipTeacher.dialogFormVisible = false;
            //给父组件传值
            this.$emit("teacherName", this.formList.sUserName);
            this.$message({
              message: "设置成功！",
              type: "success"
            })
        }).catch(Error =>{
          this.upLoading = false;
        })
      } else {
        this.$message("该班主任不存在");
      }
    },
    cancel() {
      this.leadershipTeacher.dialogFormVisible = false;
    }
  }
};
</script>
<style lang="scss" scoped>
section,
footer {
  text-align: center;
}
section {
  padding-bottom: 50px;
  el-button {
    margin-right: 20px;
  }
}
</style>
